/** Materio Template Vuetify variables **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/

$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
/* stylelint-disable-next-line max-line-length */
$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

@forward "@/styles/desktop/template/base/libs/vuetify/variables" with (
    $body-font-family: $font-family-custom !default,
    $border-radius-root: 6px !default,

    $shadow-key-umbra: (
        0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
        1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
        2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),

        // ℹ️ Modified
        3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),

        4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
        5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),

        // ℹ️ Modified
        6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),

        7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
        8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
        9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
        10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
        11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
        12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
        13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
        14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
        15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
        16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
        17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
        18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
        19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
        20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
        21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
        22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
        23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
        24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
    ) !default,

    $shadow-key-penumbra: (
        0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
        1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
        2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),

        // ℹ️ Modified
        3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),

        4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
        5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),

        // ℹ️ Modified
        6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),

        7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
        8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
        9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
        10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
        11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
        12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
        13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
        14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
        15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
        16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
        17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
        18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
        19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
        20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
        21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
        22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
        23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
        24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
    ) !default,

    $shadow-key-ambient: (
        0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
        1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
        2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),

        // ℹ️ Modified
        3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),

        4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
        5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),

        // ℹ️ Modified
        6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),

        7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
        8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
        9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
        10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
        11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
        12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
        13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
        14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
        15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
        16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
        17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
        18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
        19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
        20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
        21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
        22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
        23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
        24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
    ) !default,

    // 👉 Typography
    $typography: (
        "h1": (
            "weight": 500,
            "line-height": 7rem,
            "letter-spacing": -0.0938rem
        ),
        "h2": (
            "weight": 500,
            "line-height": 4.5rem,
            "letter-spacing": -0.0313rem
        ),
        "h3": (
            "weight": 500,
            "line-height": 3.5rem
        ),
        "h4": (
            "weight": 500,
            "line-height": 2.625rem,
            "letter-spacing": 0.0156rem
        ),
        "h5": (
            "weight": 500,
            "line-height": 2rem
        ),
        "h6": (
            "letter-spacing": 0.0094rem
        ),
        "subtitle-1": (
            "letter-spacing": 0.0094rem
        ),
        "subtitle-2": (
            "line-height": 1.375rem,
            "letter-spacing": 0.0063rem,
        ),
        "body-1": (
            "letter-spacing": 0.0094rem,
        ),
        "body-2": (
            "letter-spacing": 0.0094rem,
        ),
        "caption": (
            "letter-spacing": 0.025rem,
        ),
        "overline": (
            "weight": 400,
            "line-height": 1.125rem,
            "letter-spacing": 0.0625rem,
        )
    ) !default,

    // 👉 Card
    $card-title-letter-spacing: 0.0094rem !default,
    $card-title-line-height: 2rem !default,
    $card-subtitle-opacity: 1 !default,

    // 👉 Tooltip
    $tooltip-background-color:#212121 !default,
    $tooltip-border-radius: 4px !default,
    $tooltip-padding: 4px 8px !default,

    // 👉 Alert
    $alert-title-font-size: 1rem !default,
    $alert-border-radius: 5px !default,
    $alert-title-letter-spacing: 0.15px !default,

    // 👉 Badge
    $badge-border-color:rgb(var(--v-theme-surface)) !default,
    $badge-dot-height: 0.5rem !default,
    $badge-dot-width: 0.5rem !default,

    // 👉 Button
    $button-height: 38px !default,
    $button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
    $button-border-radius: 5px !default,
    $button-padding-ratio: 1.7 !default,
    $button-text-letter-spacing: 0.025rem !default,
    $button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,

    // 👉 Dialog
    $dialog-card-header-padding: 20px !default,
    $dialog-card-header-text-padding-top: 0 !default,
    $dialog-card-text-padding: 20px !default,

    // 👉 Chip
    $chip-label-border-radius: 4px !default,
    $chip-close-size: 20px !default,

    // 👉 Expansion panel
    $expansion-panel-title-padding: 16px 20px !default,
    $expansion-panel-title-font-size: 1rem !default,
    $expansion-panel-disabled-overlay: 0 !default,
    $expansion-panel-active-title-min-height: 51px !default,
    $expansion-panel-title-min-height: 51px !default,
    $expansion-panel-text-padding: 0 20px 20px !default,

    // 👉 Menu
    $menu-content-border-radius: 5px !default,

    // 👉 List
    $list-subheader-text-opacity: 1 !default,

    // 👉 Snackbar
    $snackbar-background:#212121 !default,
    $snackbar-border-radius: 4px !default,
    $snackbar-color: rgb(var(--v-theme-on-primary)) !default,

    // 👉 Tabs
    $tabs-height: 40px !default,

    // 👉 Slider
    $slider-track-active-size: 4px !default,
    $slider-thumb-label-padding: 4px 12px !default,
    $slider-thumb-label-font-size: 0.875rem !default,

    // 👉 Timeline
    $timeline-dot-size: 34px !default,
    $timeline-dot-divider-background: transparent !default,

    // 👉 Overlay
    $overlay-opacity: 0.5 !default,

    // 👉 Navigation Drawer
    $navigation-drawer-scrim-opacity:0.5 !default,

    // 👉 Table
    $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
);
